<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <ApplicationCategory ref="CategoryRef" @treeClick="treeClick" />
          </div>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="mainbox">
          <div class="filter-container">
            <el-form ref="queryForm" :model="queryParams" :inline="true"
                     label-width="68px" @submit.native.prevent>
              <el-form-item label="流程名称" prop="processName">
                <el-input
                  v-model="queryParams.processName"
                  :maxlength="30"
                  placeholder="请输入流程名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-form>
            <div class="flex-1" />
            <div>
              <div class="flex-1" />
              <div style="display:flex;">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
              </div>
            </div>
          </div>
          <el-card class="box">
            <div v-for="item in flowableList" :key="item.categoryId" class="info-card">
              <template v-if="item.sysFlowProcdefList && item.sysFlowProcdefList.length>0">
                <div class="info-card-header">{{ item.categoryName }}</div>
                <div class="info-card-content">
                  <div v-for="child in item.sysFlowProcdefList" :key="child.procdefId" class="border"
                       @click="apply(child)">
                    <div class="application">
                      <i class="icon" :style="{background:item.color}">
                        <Item v-if="child.icon" :icon="child.icon" />
                      </i>
                      <el-button type="text" class="text">{{ child.processName }}</el-button>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { flowablePage } from '@/framework/api/affairManage/initiateApplicationConfig/Config'
import Item from '@/framework/layout/components/Sidebar/Item'
import ApplicationCategory from './components/ApplicationCategory.vue'

export default {
  name: 'InitiateApplication',
  components: {
    Item,
    ApplicationCategory
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        categoryId: '',
        processName: ''
      },
      flowableList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      flowablePage(this.queryParams).then(({ data: response }) => {
        this.flowableList = response
        this.loading = false
        this.flowableList.forEach((item, index) => {
          this.$set(item, 'color', this.getRandomColor())
        })
      })
    },
    getRandomColor() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return `rgb(${r},${g},${b})`
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    apply(data) {
      this.$router.push({
        path: '/workflow/flowDetail',
        query: {
          deploymentId: data.deploymentId, // 流程部署id
          type: 'apply' // 流程状态-发起申请
        }
      })
    },
    treeClick(categoryId) {
      this.queryParams.categoryId = categoryId
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card{
  height: calc(100vh - 60px - 60px - 40px - 2px - 32px) !important;
}
  .box{
    width: 100%;
    box-sizing: border-box;
  }
  ::v-deep .el-card__body {
    padding: 20px;
    height: calc(100vh - 60px - 60px - 40px - 2px - 128px);
    overflow: auto;
}
  .el-divider--horizontal{
    margin: 4px 0;
  }
    .info-card{
    background-color: #fff;
  }
  .info-card-header{
    padding-bottom: 16px;
    font-weight: 700;
  }
  .info-card-content{
    padding:0px 16px 16px 0px;
  }
  .border{
    width: 280px;
    height: 128px;
    display:inline-block;
    border-radius: 8px 8px 8px 8px;
    background: #FFFFFF;
    box-shadow: inset 0px -2px 4px 0px rgba(52,97,255,0.1);
    opacity: 1;
    border: 1px solid #F2F3F5;
    margin-right: 16px;
    margin-top: 16px;
  }
  .application{
    height: 128px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    box-sizing: border-box;
    padding: 40px;
    .icon{
      background:#FF8F1F;
      color:#fff;
      padding:10px;
      border-radius: 5px;
      font-weight: 700;
      font-size: 18px;
    }
  }
  .text{
    table-layout: fixed;
    // 字母换行
    word-wrap: break-word;
    // 单词换行
    word-break: break-all;
    overflow: hidden;
    color:#131314;
    margin-left:16px;
    // 文字换行
    white-space:pre-wrap;
    line-height: 20px;
  }

</style>
